import G6 from "@antv/g6";

export const registerCircle = () => {
  G6.registerNode("my-circle", {
    draw(cfg: any, group) {
      const { style, labelCfg, dimensionCfg } = cfg;
      // console.log(style, labelCfg, cfg, "style, labelCfg");
      const keyShape = group.addShape("circle", {
        attrs: {
          x: 0,
          y: 0,
          r: cfg.size / 2,
          ...style,
          ...labelCfg,
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: "circle-shape",
      });

      if (cfg.isLock) {
        // 锁定图标
        group.addShape("text", {
          attrs: {
            x: -cfg.size * (1 / 3),
            y: -cfg.size * (1 / 3),
            fontFamily: "iconfont", // 对应css里面的font-family: "iconfont";
            textAlign: "center",
            textBaseline: "middle",
            text: String.fromCodePoint(59101),
            fontSize: 16,
            fill: "rgba(180, 183, 187, 1)",
          },
          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
          name: "text-shape1",
        });
      }

      group.addShape("text", {
        attrs: {
          x: 0,
          y: cfg.size <= 26 ? 26 : cfg.size,
          textAlign: "center",
          text: fittingString(cfg.label, 200, labelCfg.style.fontSize),
          ...labelCfg.style,
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: "text-shape1",
        draggable: true,
      });

      if (dimensionCfg.name) {
        let widthNum = 0;
        const len = dimensionCfg.name.length, // 名称总长
          zhLen = dimensionCfg.name.replace(
            // 中文及中文符号的总长
            /[^\u4E00-\u9FA5\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b\uff01\u3010\u3011\uffe5]/g,
            ""
          ).length;
        if (!zhLen) {
          widthNum = 20 + len * 7; // 中文长度乘12，数字英文乘6
        } else {
          widthNum = 20 + zhLen * 12 + (len - zhLen) * 6; // 中文长度乘12，数字英文乘6
        }
        // console.log(len, zhLen);

        group.addShape("rect", {
          attrs: {
            x: 0,
            y: -cfg.size * (1 / 2),
            width: widthNum,
            height: 20,
            stroke: "gray",
            fill: "white",
            fillOpacity: 0.6,
            radius: [10],
          },
          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
          name: "rect-shape",
          draggable: true,
        });
        group.addShape("text", {
          attrs: {
            x: 10,
            y: -cfg.size * (1 / 7),
            textAlign: "left",
            text: dimensionCfg.name,
            ...dimensionCfg.style,
          },
          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
          name: "text-shape1",
          draggable: true,
        });
      }

      return keyShape;
    },
    // 响应状态变化
    setState(name, value, item) {
      // console.log(name, value, item, "name, value, item");
      const group = item.getContainer();
      const shape = group.get("children")[0]; // 顺序根据 draw 时确定
      if (name === "active") {
        if (value && !shape.attrs.isHighLight) {
          shape.attr({
            // ...shape.attrs.hover,
            // shadowOffsetX: 10,
            // shadowOffsetY: 10,
            lineWidth: 2,
            stroke: "#5F95FF",
            shadowColor: "#5F95FF",
            shadowBlur: 6,
            strokeOpacity: 0.6,
            cursor: "pointer",
          });
        } else if (value === false && !shape.attrs.isHighLight) {
          shape.attr({
            stroke: "",
            cursor: "",
            shadowColor: "",
            shadowBlur: 0,
            strokeOpacity: 1,
            lineWidth: 0,
          });
        }
      }
      if (name === "dark") {
        if (value) {
          shape.attr({
            opacity: 0.2,
          });
        } else {
          shape.attr({
            opacity: 1,
          });
        }
      }
      if (name === "selected" || name === "highlight") {
        if (value) {
          shape.attr({
            lineWidth: 4,
            stroke: "#5F95FF",
            shadowColor: "#5F95FF",
            shadowBlur: 6,
            strokeOpacity: 0.8,
            cursor: "pointer",
            isHighLight: true,
          });
        } else {
          shape.attr({
            stroke: "",
            isHighLight: false,
            cursor: "",
            shadowColor: "",
            shadowBlur: 0,
            strokeOpacity: 1,
            lineWidth: 0,
          });
        }
      }
    },
  });
};

/**
 * format the string
 * @param {string} str The origin string
 * @param {number} maxWidth max width
 * @param {number} fontSize font size
 * @return {string} the processed result
 */
export const fittingString = (str, maxWidth, fontSize) => {
  const ellipsis = "...";
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  let currentWidth = 0;
  let res = str;
  const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese charactors and letters
  str.split("").forEach((letter, i) => {
    if (currentWidth > maxWidth - ellipsisLength) return;
    if (pattern.test(letter)) {
      // Chinese charactors
      currentWidth += fontSize;
    } else {
      // get the width of single letter according to the fontSize
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
};
